<template>
	<view>
		<view class="card marginTop u-p-30" v-for="(item,index) in cinemaList" :key="index" @click="cinemaHandle(item)">
			<view class="u-font-32 u-line-1">{{item.cinemaName}}</view>
			<view class="u-flex u-row-between u-m-t-10" style="color: #8E8E8E;">
				<view class="u-font-13 u-line-2 u-p-r-30">{{item.address}}</view>
				<view class="u-font-12">{{item.distance}}</view>
			</view>
			<view class="u-m-t-10">
				<u-tag text="不退票" class="u-m-r-15" />
				<u-tag text="不改签" />
			</view>
		</view>
		<view class="u-p-30">
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cinemaList: [],
				cinemaFrom: {
					name: '',
					movieAreaId:'',//区域id
					cityId: '', //城市id
					lat: '', //经度
					lng: '', //纬度
					page: 1,
					size: 10
				},
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				size: 10,
				name: '',
				total: 0
			}
		},
		methods: {
			//获取影院列表
			getCinemaList() {
				this.cinemaFrom.page = this.page;
				this.cinemaFrom.size = this.size;
				this.cinemaFrom.name = this.name;
				this.cinemaFrom.cityId = uni.getStorageSync('cityId');
				this.cinemaFrom.lat = uni.getStorageSync('lat');
				this.cinemaFrom.lng = uni.getStorageSync('lng');
				this.status = 'loading';
				this.$u.api.getCinemaList(this.cinemaFrom).then(res => {
					if (res.code == 0) {
						this.cinemaList = [...this.cinemaList, ...res.data];
						this.total += res.data.length;
						if (this.total >= res.extraInfo) {
							this.status = 'nomore';
						}
					}
				})
			},
			cinemaHandle(item) {
				uni.navigateTo({
					url: '/pages/moive/cinema?cinemaData='+ JSON.stringify(item) 
				})
			}
		}
	}
</script>

<style scoped>
	.card {
		padding: 20rpx 0;
		margin: 30rpx;
		box-shadow: 0 4rpx 24rpx 0 rgb(0 0 0 / 10%);
		border-radius: 10rpx;
	}
	>>>.u-mode-light-primary {
		background: linear-gradient(to right, #FF6801, #FF9832);
		border-color: #ffffff !important;
		color: #ffffff;
	}
</style>
